<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>商家设置</title>
    <link href="../css/base.css" rel="stylesheet" type="text/css" />
    <script src="../js/flexible.js" type="text/javascript"></script>
    <script src="../js/jquery.js" type="text/javascript"></script>
    <link href="css/style.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" type="text/css" href="http://at.alicdn.com/t/font_950377_g4e7evbmoq.css">
    <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=Caovmo3VijGgjLdpm8C5NiEHGthavrpS"></script>
    <script type="text/javascript" src="https://apis.map.qq.com/tools/geolocation/min?key=6DXBZ-HXCC4-FG4UR-XBSTY-YUCB7-DDF4F&referer=myapp"></script>
    <script type="text/javascript" src="https://map.qq.com/api/js?v=2.exp&key=6DXBZ-HXCC4-FG4UR-XBSTY-YUCB7-DDF4F"></script>
    <style>
        body {
            background: #fff;
            padding-top: 0;
        }

        #allmap,
        #qqmap {
            height: 4rem;
            width: 100%;
            display: flex;
            align-items: center;
            font-size: .36rem;  
            background: #f6f6f6;
            justify-content: center;
        }

        .bdpoint,
        .qqpoint {
            font-size: .3rem;
            line-height: 1.4;
            background: #fff;
            padding: .2rem;
        }
        .header{ background: none; color: #fff; border-bottom: none; top: .2rem}
        .header .left{ width: .8rem;height: .8rem;line-height: .8rem; background: #000; opacity: .6;border-radius:50%; margin-left: .2rem;}
        .baocun{background: #fff; padding: .1rem .2rem .4rem;}
    </style>
</head>

<body class="bgf3f2f7">
        <div class="header">
                <div class="left"><i class="iconfont icon-fanhui1" onClick="javascript:history.back(-1)"></i></div>
            </div>
    <div id="allmap">（百度）获取位置地图中...</div>
    <div class="bdpoint"></div>
    <div class="baocun"><a href="javascript:void(0)" class="btn_default">保存当前位置</a></div>
    <script>
        $(function () {
            //百度地图
            var geolocation = new BMap.Geolocation();
            geolocation.getCurrentPosition(function (r) {
                if (this.getStatus() == BMAP_STATUS_SUCCESS) {
                    var point = r.point,
                        lng = point.lng,
                        lat = point.lat;
                    var point = new BMap.Point(lng, lat);
                    var map = new BMap.Map("allmap");
                    map.centerAndZoom(point, 16);
                    var marker = new BMap.Marker(point); // 创建标注
                    map.addOverlay(marker); // 将标注添加到地图中

                    //获取当前地理位置名称 
                    var geoc = new BMap.Geocoder();
                    geoc.getLocation(point, function (rs) {
                        var addComp = rs.addressComponents;
                        console.info(addComp);
                        console.info(addComp.city + ", " + addComp.district + ", " + addComp.street);
                        $(".bdpoint").html("当前位置："+addComp.city + addComp.district + addComp.street +
                            "，经度:" + lng + "，纬度:" + lat);
                    });
                    
                    //标注拖拽后的位置
                     marker.enableDragging(); 
                     marker.addEventListener("dragend", function (e) {
                        lng=e.point.lng;
                        lat=e.point.lat;
                        var point = new BMap.Point(lng, lat);
                        geoc.getLocation(point, function (rs) {
                                var addComp = rs.addressComponents;
                                console.info(addComp.city + ", " + addComp.district + ", " + addComp.street);
                                $(".bdpoint").html("当前位置："+addComp.city + addComp.district + addComp.street +
                                    "，经度:" + lng + "，纬度:" + lat);
                        });
                     });

                } else {
                    console.info('failed' + this.getStatus());
                }
            }, {
                enableHighAccuracy: true
            });
        });
    </script>

</body>

</html>